<template>
	<view class="dormitory_card_box" @click="toDormitoryFun">
		<view class="header">
			<view class="name">
				{{dormitoryData.dormitory.dormitory_name}}
			</view>
			<view class="type">
				<MyTag 
					fontSize="24rpx" 
					:borderBgc="info_border_color" 
					:color="dormitoryTypes[dormitoryData.dormitory.dormitory_type+'']?.color || '#FFFFFF'">
						<template #icon>
							<MyIcons 
								size="14px" 
								:src="joinSystemPath(ChangeIconDormitoryType[dormitoryData.dormitory.dormitory_type+''])"/>
						</template>
						<template #info>
							{{ChangeDormitoryType[dormitoryData.dormitory.dormitory_type+'']}}
						</template>
				</MyTag>
			</view>
		</view>
		<view class="joiner">
			<view class="avatar" v-for="user in dormitoryData.joiner.slice(0,6)" :key="user.user_id">
				<Avatar 
					:fileName="user.avatar" 
					size="70rpx"
					radius="12rpx"/>
			</view>
			<view v-if="false" class="avatar" @click.stop="inviteFun">
				<Avatar 
					fileName="invite.png" 
					size="70rpx"
					radius="12rpx"/>
			</view>
		</view>
		<view class="footer">
			<view class="line"></view>
			<view class="item">
				<MyIcons size="40rpx" :src="joinSystemPath('peopleNums.png')"/>
				<view class="info">
					{{changeNums(dormitoryData.joiner.length)}}个成员
				</view>
			</view>
			<view class="item">
				<MyIcons size="40rpx" :src="joinSystemPath('notice.png')"/>
				<view class="info">
					<uni-badge 
						class="uni-badge-left-margin" 
						:text="dormitoryData.unViewNoticeNums===0 ? '' : changeNums(dormitoryData.unViewNoticeNums,10)" 
						absolute="rightTop" :offset="[-2, -1]" 
						size="small">
						{{dormitoryData.unViewNoticeNums===0 ? '无新公告' : '未读公告'}}
					</uni-badge>
				</view>
			</view>
			<view class="item">
				<MyIcons size="40rpx" :src="joinSystemPath('bill.png')"/>
				<view class="info">
					<view v-if="dormitoryData.newBill" class="have_bill">
						<view v-if="dormitoryData.newBill.in_out_type===BillInOutType.IN" class="in">
							<uni-badge
								class="uni-badge-left-margin" 
								text="新" 
								absolute="rightTop" :offset="[-2, -1]" 
								size="small">
								+{{changeNums(dormitoryData.newBill.money,1000)}}元
							</uni-badge>
						</view>
						<view v-else class="out">
							<uni-badge
								class="uni-badge-left-margin" 
								text="新" 
								absolute="rightTop" :offset="[-5, -1]" 
								size="small">
								-{{changeNums(dormitoryData.newBill.money,500)}}元
							</uni-badge>
						</view>
					</view>
					<view v-else class="not_have_bill">
						无新账单
					</view>
				</view>
			</view>
			<view class="item">
				<MyIcons size="40rpx" :src="joinSystemPath('duty.png')"/>
				<view class="info">
					<uni-notice-bar 
						color="#6AA375" 
						background-color="#FFFFFF" 
						:speed="40" 
						diyHeight="10rpx" 
						:fontSize="10" 
						:how-icon="false" 
						scrollable 
						:text="joinNameByDutyer(dormitoryData)" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'
	
	import {useDormitoryType} from '@/hooks/useDormitoryType.js' 
	
	import Avatar from '@/components/Avatar/Avatar.vue'
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	import MyTag from '@/components/MyTag/MyTag.vue'
	import Tips from '@/components/Tips/Tips.vue'
	
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	import {
		changeNums,
		joinNameByDutyer,
		isTest
	} from '@/utils/changeData.js'
	
	import {
		ChangeDormitoryType,
		ChangeIconDormitoryType,
		BillInOutType
	} from '@/enum/GlobalEnum.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	const user_store=userStore()
	
	const {dormitoryTypes}=useDormitoryType()
	
	const props = defineProps({
		dormitoryData:{
			type:Object
		}
	})
	
	const {
		primary_card_bgc,
		primary_line_color,
		primary_text_color,
		info_border_color
	} = dynamicStyle_store.globalStyle
	
	//邀请
	const inviteFun=()=>{
	}
	
	//去往常用宿舍页面
	const toDormitoryFun=()=>{
		const {
			id:relation_id,
			dormitory
			} = props.dormitoryData
		
		uni.setStorageSync('homeData',{
			relation_id,
			dormitory_id:dormitory.dormitory_id
		})
		uni.reLaunch({
			url:`/pages/Dormitory/Dormitory`
		})
	}
	
</script>

<style lang="less">
	.dormitory_card_box{
		background-color: v-bind(primary_card_bgc);
		border-radius:12rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		margin: 3% 0;
		height: 250rpx;
		padding: 3%;
		.header{
			display: flex;
			align-items: center;
			.name{
				font-size: 35rpx;
				color:v-bind(primary_text_color);
				width: 94%;
				white-space:nowrap;
				text-overflow:ellipsis;
				overflow: hidden;
			}
			.type{
				width: 20%;
			}
		}
		.joiner{
			margin-bottom: 20rpx;
			width: 80%;
			display: grid;
			grid-template-columns:repeat(6,70rpx);
			grid-template-rows:repeat(1,70rpx);
			column-gap:10rpx;
			height: 70rpx;
			overflow: hidden;
			.avatar{
				margin-right: 10rpx;
				width: 70rpx;
			}
		}
		.footer{
			position: relative;
			width: 100%;
			display: flex;
			.line{
				position: absolute;
				bottom:65rpx;
				left: -20rpx;
				width: 120%;
				height: 1rpx;
				background-color: v-bind(primary_line_color);
			}
			.item{
				display: flex;
				align-items: center;
				width: 85%;
				.info{
					width: 100%;
					font-size: 24rpx;
					color:v-bind(primary_text_color);
				}
			}
		}
	}
</style>